<template>
  <div class="collaborationManage">
    <el-tabs v-model="activeName" type="card" class="elTabs">
      <el-tab-pane name="first">
        <div slot="label" class="pageHeader">待处理业务协同</div>
      </el-tab-pane>
    </el-tabs>
    <div class="container">
      <!-- 搜索查询 -->
      <div class="searchBar" v-show="showSearch">
        <div class="searchForm">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="80px"
          >
            <!-- <el-form-item label="申请单位:" prop="deptName">
            <el-input
              v-model.trim="queryParams.deptName"
              placeholder="请输入申请单位"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
            <el-form-item label="案件名称:" prop="caseId">
              <el-select
                v-model.trim="queryParams.caseId"
                @keyup.enter.native="handleQuery"
                filterable
              >
                <el-option
                  v-for="item in caseOptions"
                  :key="item.id"
                  :label="item.caseName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="任务名称:" prop="taskId">
              <el-select
                v-model="queryParams.taskId"
                @keyup.enter.native="handleQuery"
              >
                <el-option
                  v-for="item in taskOptions"
                  :key="item.id"
                  :label="item.taskName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="searchButtons">
          <el-button class="searchButton" @click="handleQuery">搜索</el-button>
          <el-button class="resetButton" @click="resetQuery">重置</el-button>
        </div>
      </div>
      <!-- 新增、批量删除、导入、导出 -->
      <!-- <div class="addDeleteBar"> -->
      <!-- <el-button
        class="addButton"
        icon="el-icon-plus"
        v-hasPermi="['case:add']"
        @click.native="handleAdd"
        >新增</el-button
      >
      <el-button
        @click="handleDelete"
        :class="!multiple ? 'addButton' : 'resetButton'"
        :disabled="multiple"
        icon="el-icon-delete"
        v-hasPermi="['case:delete']"
        >批量删除</el-button
      > -->
      <!-- <el-button class="addButton" icon="el-icon-download">导入</el-button>
      <el-button class="addButton" icon="el-icon-upload2">导出</el-button> -->
      <!-- </div> -->
      <!-- 表单选择清空 -->
      <div class="tableSelectArea">
        <div></div>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </div>
      <div class="table">
        <el-table class="tableArea" v-loading="loading" :data="collList">
          <el-table-column
            type="index"
            label="序号"
            width="70"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="申请单位"
            :show-overflow-tooltip="true"
            align="left"
            prop="deptName"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="caseName"
            width="250"
            label="协同案件"
            align="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="taskName"
            width="250"
            label="协同任务"
            align="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="applyReason"
            label="申请事由"
            width="250"
            align="left"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="applyTime"
            label="申请时间"
            align="center"
            width="200"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="处置结果" align="center" width="82">
            <template v-slot="scope">
              <dict-tag
                :class="{
                  statusDone:
                    scope.row.processResult ==
                    dict.type.process_result[0].value,
                  statusDoing:
                    scope.row.processResult ==
                    dict.type.process_result[1].value,
                  statusUndo:
                    scope.row.processResult ==
                    dict.type.process_result[2].value,
                }"
                class="dataDoStatus"
                :options="dict.type.process_result"
                :value="scope.row.processResult"
              ></dict-tag>
              <!-- <dict-tag
              class="dataDoStatus statusDoing"
              :options="dict.type.case_state"
              v-show="scope.row.caseState == 1"
              :value="scope.row.caseState"
            ></dict-tag>
            <dict-tag
              class="dataDoStatus statusDone"
              :options="dict.type.case_state"
              v-show="scope.row.caseState == 2"
              :value="scope.row.caseState"
            ></dict-tag>
            <dict-tag
              class="dataDoStatus statusFalse"
              :options="dict.type.case_state"
              v-show="scope.row.caseState == 3"
              :value="scope.row.caseState"
            ></dict-tag> -->
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150" align="left" fixed="right">
            <template slot-scope="scope">
              <div class="tableButtonArea">
                <el-button
                  type="text"
                  class="operationButton"
                  @click="handleDetail(scope.row)"
                  >详情</el-button
                >
                <!-- <el-button
                type="text"
                class="operationButton"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                class="operationButton"
                @click="handleDelete(scope.row)"
                >删除</el-button
              > -->
                <div class="buttonLine"></div>
                <el-button
                  type="text"
                  class="operationButton"
                  v-hasPermi="['waitColl:do']"
                  @click="handleDo(scope.row)"
                  >处置</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="tableFooter">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <waitCollaborationModal
      ref="collaborationModal"
      :modalType.sync="modalType"
      :collId="id"
      @fatherMethod="fatherMethod"
    ></waitCollaborationModal>
  </div>
</template>

<script>
import { MODALTYPE, PAGESIZE, PAGENUM } from "../../../utils/variable.js";
import { fatherMethod } from "../../../utils/commonMethods";
import { listwaitCollaboration,listTask } from "@/api/collaboration/collaboration";
import { getCaseList } from "@/api/caseManage/case.js";
import waitCollaborationModal from "./components/waitCollaborationModal.vue";
export default {
  dicts: ["process_result"],
  data() {
    return {
      activeName: "first",
      modalType: "",
      id: "",
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: PAGENUM,
        pageSize: PAGESIZE,
        // deptId:'',
        deptName: "",
        // caseName: "",
        // taskName: "",
        caseId: "",
        taskId: "",
      },
      loading: false,
      // 总条数
      total: 0,
      caseOptions: [],
      taskOptions: [],
      //  显示搜索条件
      showSearch: true,
      //案件列表
      caseList: [],
      //协同处理列表
      collList: [],
    };
  },
  components: { waitCollaborationModal },
  methods: {
    fatherMethod,
    /** 查询案件列表 */
    getList() {
      this.loading = true;
      listwaitCollaboration(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((response) => {
        this.collList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.$store.dispatch("getTotal");
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.modalType = MODALTYPE["详情"];
      this.id = row.id;
    },
    //处置
    handleDo(row) {
      this.modalType = MODALTYPE["处置"];
      this.id = row.id;
    },
  },
  created() {
    let params = {
      oucode: null,
    };
    getCaseList(params).then((res) => {
      this.caseOptions = res.data;
    });
    let userId = {
      userId: this.$store.state.user.userId,
    };
    listTask(userId).then((res) => {
      this.taskOptions = res.data;
    });
    this.getList();
  },
  mounted() {},
};
</script>
<style lang='scss' scoped >
@import "../../../assets/styles/variables.scss";
.collaborationManage {
  height: 100%;
  .tableFooter {
    text-align: right;
    justify-content: flex-end;
    // margin-top: 25px;
    margin-right: 35px;
    // width: 100%;
    ::v-deep .btn-prev {
      color: #d4d3d3 !important;
      background-color: #fff;
      border: 1px solid #d4d3d3;
    }
    ::v-deep .btn-next {
      color: #d4d3d3 !important;
      background-color: #fff;
      border: 1px solid #d4d3d3;
    }
    ::v-deep .el-pager li {
      background-color: #fff;
      border: 1px solid #d4d3d3;
      font-size: 12px;
      font-family: $font-family;
      font-weight: 400;
      color: #5a5b5d;
    }
  }
  .el-form-item__label {
    font-family: $font-family;
    font-weight: $form-label-font-weight;
    font-size: $form-label-font-size;
    color: $form-label-color;
  }

  .el-input__inner {
    font-size: $form-content-font-size;
    font-family: $font-family;
    font-weight: $form-label-font-weight;
    // color: #AEAFB0;
  }
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0px;
}
::v-deep .el-tabs--card .el-tabs__header {
  background-color: #e4e7ed;
}
::v-deep.el-tabs--card .el-tabs__header .el-tabs__item {
  border-radius: 10px solid black;
  background-color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #053ef6;
  line-height: 48px;
  margin-top: 0;
}
.el-tabs--card {
  margin-left: 10px;
  border: 0px !important;
}
</style>
